<template>
  <a-modal
    v-model:visible="visible"
    width="800px"
    title-align="start"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 品类变更 </template>

    <a-form ref="formRef" :model="form" :layout="layout" :rules="rules">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item
            field="name"
            label="变更后品类编码"
            label-col-flex="400px"
          >
            <a-input
              v-model="form.name"
              placeholder="please enter your username..."
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            field="变更后品类名称"
            label="Post"
            label-col-flex="300px"
          >
            <a-input
              v-model="form.name"
              placeholder="please enter your username..." /></a-form-item
        ></a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item
            field="name"
            label="变更后父级编码"
            label-col-flex="400px"
          >
            <a-input
              v-model="form.name"
              placeholder="please enter your username..."
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            field="变更后父级品类名称"
            label="Post"
            label-col-flex="300px"
          >
            <a-input
              v-model="form.name"
              placeholder="please enter your username..." /></a-form-item
        ></a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item field="name" label="采购大类" label-col-flex="400px">
            <a-input
              v-model="form.name"
              placeholder="please enter your username..."
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="post" label="采购品类层级" label-col-flex="300px">
            <a-input
              v-model="form.name"
              placeholder="please enter your username..." /></a-form-item
        ></a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item field="name" label="是否停用" label-col-flex="400px">
            <a-radio v-model="checked1">是</a-radio>
            <a-radio v-model="checked2">否</a-radio>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="post" label="Post" label-col-flex="300px">
            <a-input
              v-model="form.name"
              placeholder="please enter your username..." /></a-form-item
        ></a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item field="name" label="新增变更原因" label-col-flex="400px">
            <a-textarea placeholder="Please enter something" allow-clear />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue';
  import { Modal } from '@arco-design/web-vue';

  const layout = ref('vertical');
  const form = reactive({
    section: {},
    name: '',
    post: '',
    isRead: false,
  });

  const checked1 = ref(false);
  const checked2 = ref(false);

  const rules = {
    name: [
      {
        required: true,
        message: 'name is required',
      },
    ],
  };

  const visible = ref(false);
  const open = () => {
    visible.value = true;
  };
  const handleOk = () => {
    visible.value = false;
    Modal.success({
      title: '确认提交14条数据',
      content: '',
    });
  };
  const handleCancel = () => {
    visible.value = false;
    console.log('提交成功');
  };

  defineExpose({ open });
</script>

<style scoped></style>
